<template>
	<view>
		<view class="balance">
			<view class="head-box z-padding-lr-32 theme-colors z-padding-t-100 z-padding-b-100 z-flex-c-s-b z-flex-0">
				<view class="z-text-c">
					<view class="money z-text-c">
						￥
						<text class="z-font-64">{{ type == 1 ? money.shop_money : money.money }}</text>
					</view>
					<view class="bzj z-text-c">当前余额（元）</view>
				</view>
				<view class="tx z-text-c" @tap="withdrawal">提现</view>
			</view>

			<view class="content-box">
				<view class="z-flex-c-s-b z-padding-t-40 z-padding-lr-32 z-padding-b-8">
					<view class="account">账户流水</view>
					<view class="record" @tap="withdrawalRecord">
						提现记录
						<image class="r-img" src="../../static/service/r-img.png"></image>
					</view>
				</view>
				<view class="main-box">
					<scroll-view class="scroll-box" scroll-y="true" :show-scrollbar="false" enhanced="true" @scrolltolower="more">
						<!-- list -->
						<view class="z-flex-c-s-b each z-padding-tb-24 z-padding-lr-32 z-margin-t-24" v-for="(item,index) in list" @tap="detail(item.order_id)">
							<view>
								<view class="title z-font-22 z-flex-c">
									{{ item.memo }}
									<image v-if="item.order_id" class="r-img z-margin-l-8" src="../../static/service/r-img.png"></image>
								</view>
								<view class="time z-font-22 z-margin-t-8">{{ item.createtime | date('yyyy-mm-dd hh:MM') }}</view>
							</view>
							<view class="bill-money" v-if="tool.includes(item.money,'-')">{{ item.money }}</view>
							<view class="bill-money" v-else>+{{ item.money }}</view>
						</view>
						<!-- <van-empty description="暂无流水" wx:if="{{finish && list.length === 0}}" /> -->
						<u-empty v-if="finish && list.length === 0" text="列表为空" mode="list"></u-empty>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list:[],
			    finish: false,
			    loading: false,
			    page: 1,
			    type: '',
			    money: ''
		}
	},
	onLoad(options) {
	    this.type = options.type
	    uni.setNavigationBarTitle({
	      title: options.type == 1 ? '商户余额' : '平台余额',
	    })

	  },
	  onShow(){
	    this.reload()
	  },
	methods: {
		// 提现
		  withdrawal(){
		    this.util.skip('/service/withdraw/withdraw?type='+this.type)
		  },
		  // 提现记录
		  withdrawalRecord(){
		    this.util.skip('/service/moneyRecord/moneyRecord?type='+this.type)
		  },
		  detail(e){
		    let id = e.currentTarget.dataset.id;
		    if(id) util.skip('/pages/orderDetail/orderDetail?id='+id)
		  },
		  reload(){
		    this.list = [],
		    this.page = 1,
		    this.finish = false
		    this.getList()
		  },
		  more(){
		    this.page = ++this.page
		    this.getList()
		  },
		  getList(){
		    if(!uni.getStorageSync('token')) return
		    if(this.finish){
		      return
		    }
		    if(this.loading){
		      return
		    }
		    this.loading = true
		    let data = {
		      page: this.page,
		      type: this.type
		    }

		    this.http.get('withdraw/moneyInfo', data).then(res => {
		      if(res.data.list.length === 0){
		        this.finish = true
		      }
		      let arr = this.list.concat(res.data.list)
		      this.list = arr,
		      this.money = res.data.money

		    }).finally(res => {
		      this.loading = false
		    })
		  },
	}
}
</script>

<style>
page {
	background-color: #edf1f4;
}

.balance {
	height: 100vh;
	/* #ifdef H5 */
	height: calc(100vh - 100rpx);
	/* #endif */
	display: flex;
	flex-direction: column;
}

.money {
	color: #fff;
	font-size: 26rpx;
	font-weight: bold;
	color: #ffffff;
}

.bzj {
	font-size: 26rpx;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.5);
	padding-top: -20;
}

.tx {
	width: 130rpx;
	height: 56rpx;
	background: #ffffff;
	border-radius: 10rpx 10rpx 10rpx 10rpx;
	opacity: 1;
	font-size: 22rpx;
	font-weight: 500;
	color: #1677ff;
	line-height: 56rpx;
}

.content-box {
	flex: 1;
	overflow: hidden;
	width: 750rpx;
	background: #edf1f4;
	border-radius: 50rpx 50rpx 0rpx 0rpx;
	opacity: 1;
	position: relative;
	top: -50rpx;
	display: flex;
	flex-direction: column;
}

.main-box {
	flex: 1;
	overflow: hidden;
}

.scroll-box {
	height: 100%;
}

.r-img {
	width: 22rpx;
	height: 22rpx;
	vertical-align: middle;
}

.account {
	font-size: 30rpx;
	font-weight: bold;
	color: #1c274c;
}

.record {
	font-size: 22rpx;
	font-weight: 500;
	color: #a4a9b7;
}

.each {
	width: 622rpx;
	background: #ffffff;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	opacity: 1;
	margin: auto;
}

.title {
	font-size: 30rpx;
	font-weight: bold;
	color: #1c274c;
}

.time {
	font-size: 24rpx;
	font-weight: 500;
	color: #a4a9b7;
}

.bill-money {
	font-size: 30rpx;
	font-weight: bold;
	color: #1677ff;
}
</style>
